<template>
  <el-row class="searchFactory">
    <div style="padding-top: 10px">类别名称</div>
    <el-input class="typeInput" v-model="typeName"></el-input>
    <el-button class="searchBtn" @click="search()">查询</el-button>
    <el-button class="resetBtn" @click="reset()">重置</el-button>
    <el-button class="addBtn" @click="createType()">+ 新建</el-button>
  </el-row>
  <el-row class="formCard">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类别名称" width="200">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="editClick(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <!-- 编辑弹窗 -->
  <el-dialog title="更改类别信息" v-model="dialogFormVisible">
    <el-form :model="selectType">
      <el-form-item label="类别名称" :label-width="formLabelWidth">
        <el-input v-model="selectType.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增类型弹窗 -->
  <el-dialog title="新增产品类型" v-model="newTypeVisible">
    <el-form :model="addType">
      <el-form-item label="类别名称" :label-width="formLabelWidth">
        <el-input v-model="addType.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="newTypeVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmNewType()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'equipTypeMsg',
  data() {
    return {
      tableData: [
        {
          id: '1',
          name: '机器',
        },
      ],
      dialogFormVisible: false,
      newTypeVisible: false,
      formLabelWidth: '120px',
      selectType: {},
      newType: {},
      addType: {},
      typeName: '',
    }
  },
  mounted() {
    this.getTypes()
  },
  methods: {
    getTypes() {
      axios
        .get('/product/getAllProductType')
        .then((res) => {
          console.log(res.data.data)
          this.tableData = res.data.data
        })
        .catch((err) => {
          console.error('err')
        })
    },
    editClick(e) {
      this.dialogFormVisible = !this.dialogFormVisible
      this.selectType = e
    },
    confirmEdit() {
      axios
        .post('/product/modifyProductType', this.selectType)
        .then((res) => {
          console.log(res)
          var m = res.data.message
          if (res.data.code == 200) {
            console.log(res.data.data)
            ElMessage.success({
              message: m,
              type: 'success',
            })
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          ElMessage.error(m)
        })
      this.dialogFormVisible = false
    },
    confirmNewType() {
      axios
        .post('/product/addProductType', this.addType)
        .then((res) => {
          var m = res.data.message
          console.log(res)
          if (res.data.code == 200) {
            this.tableData.push(res.data.data)
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.getTypes()
      this.newTypeVisible = false
    },
    createType() {
      this.newTypeVisible = true
    },
    search() {
      this.newTable = this.tableData
      this.tableData = this.newTable.filter((val) => val.name == this.typeName)
    },
    reset() {
      this.getTypes()
    },
    handleDelete(f) {
      this.selectType = f
      axios
        .post('/product/deleteProductType', this.selectType)
        .then((res) => {
          console.log(res)
          var m = res.data.message
          if (res.data.code == 200) {
            this.tableData.forEach(function (item, index, arr) {
              if (item == f) {
                arr.splice(index, 1)
              }
            })
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      // this.getTypes();
    },
  },
}
</script>

<style lang="less" scoped>
.el-input {
  width: 10rem;
  padding: 0 30px 30px 30px;
  font-size: 1.2em;
}
.el-button {
  height: 10px;
}
.addBtn {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  font-weight: bold;
}
</style>
